<template>
  <div class="address">
      <mt-header title="选择地址" fixed>
        <router-link to="/confirmOrder" slot="left">
          <mt-button icon="back"></mt-button>
          <!-- <mt-button @click="handleClose">关闭</mt-button> -->
        </router-link>
      </mt-header>
    <section style="margin-top: 42px;" class="con">
    	<span class="add" @click="gosddress()">添加</span>
    	<div v-for="item in address" class="box">
    		<div class="address_con flex_style">
		      <span class="iconfont icon-weizhi">
		        
		      </span>
		      <span class="main">
		        <p class="mainp1"><span>收货人:{{item.userName}}</span><span>电话:{{item.mobile}}</span></p>
		        <p class="mainp2">收货地址: {{item.regions.provincename}} {{item.regions.cityname}} {{item.regions.name}} {{item.address}}</p>
		      </span>
		      <span class="iconfont icon-right">
		          
		      </span>
		    </div>
		    <div class="flex_style operate">
		    	<p><a :class="{ abg: item.isDefault}" @click="moren(item)"></a>默认</p>
		    	<p>
		    		<span class="iconfont icon-saomiao" @click="del(item.addressId)"> 删除</span>
		    		<span class="iconfont icon-saomiao" @click="updata(item)"> 编辑</span></p>
		    </div>
    	</div>
      
    </section>
  </div>
</template>

<script>
import axios from '../../axios/axios'
import BScroll from 'better-scroll';
export default {
  name: 'address',
  data () {
    return {
      address:[],
    }
  },
  components: {

  },
  mounted: function(){
    var that =this;
    var data=JSON.stringify({
            "actionName": "queryListPage",
			"controllerName": "userHarvestAddress",
			"data": [{},1,10]
        });
  axios.post({
      data: data,
      callback(res) {
        console.log(res.data.data.address);
        that.address=res.data.data.address;
      }
    });
  },
  methods:{
     moren:function(item){
     	if(item.isDefault){
     		var that =this;
		    var data=JSON.stringify({
		            "actionName": "insert",
					"controllerName": "userHarvestAddress",
					"data": [{
						"address": item.address,
						"addressId": item.addressId,
						"areaCode": item.areaCode,
						"isDefault": false,
						"mobile": item.mobile,
						"userName": item.userName,
					},
					1,
					10]
		        });
		  axios.post({
		      data: data,
		      callback(res) {
		        console.log(res.data);
		      }
		    });
     		item.isDefault=false;
     	}else{
     		var that =this;
		    var data=JSON.stringify({
		            "actionName": "insert",
					"controllerName": "userHarvestAddress",
					"data": [{
						"address": item.address,
						"addressId": item.addressId,
						"areaCode": item.areaCode,
						"isDefault": true,
						"mobile": item.mobile,
						"userName": item.userName,
					},
					1,
					10]
		        });
		  axios.post({
		      data: data,
		      callback(res) {
		        console.log(res.data);
		      }
		    });
     		item.isDefault=true;
     	}
     },
     gosddress:function(){
     	this.$router.push('/address');
     },
     del:function(id){
     	console.log(id)
     	var that =this;
	    var data=JSON.stringify({
	            "actionName": "delete",
				"controllerName": "userHarvestAddress",
				"data": [id]
	        });
	  axios.post({
	      data: data,
	      callback(res) {
	        console.log(res.data);
	      }
	    });
     },
     updata:function(overaddress){
     	sessionStorage.setItem('updataAddress',JSON.stringify(overaddress));
     	this.$router.push('/updataAddress');
     }
  },
  computed:{
  
  },
}
</script>
<style type="text/scss" lang="scss" scoped>
@import "../../common/style/public";
.address{
  	.con{
  		.add{
  			position: fixed;top: 10px;right:4vw;z-index: 9999;
  		}
	  	.box{
	  		background-color: #fff;margin-bottom: 6px;
			.address_con{
		    	.icon-weizhi{
					line-height: 80px;font-size:24px;width: 10vw;text-align: center;
		    	}
		    	.icon-right{
					line-height: 80px;width: 10vw;text-align: center;
		    	}
		    	.main{
		    		width: 70vw;
		    		margin-top: 0px;
		    		.mainp1{
		    			height: 40px; line-height:40px;font-size: 12px;
		    			span{
				          margin-right: 26px;
				        }
		    		}
		    		.mainp2{
				        height:20px;line-height: 20px;font-size: 12px;
				        span{
				          margin-right: 26px;
				        }
				    }
		    	}   
			}
			.operate{
				background-color: #fff;border-top: 1px solid #fafafa;height:36px;line-height: 36px;padding: 0 4vw;
				vertical-align: middle;
				p{
					vertical-align: middle;
					span{margin-right: 10px;}
					a{
						display: inline-block;width: 14px;height:14px;border-radius: 50%;border: 1px solid #e3e3e3;margin-right: 10px;position: relative;top: 3px;
					}
					.abg{
						background-image: url("../../common/img/check.png");
        				background-size:100% 100%;
					}
				}
			}
		}
 	}
}
</style>







